<template>
  <div style="margin:30px">
    <h3>教学进度信息</h3>

    <el-row class="totality">
      <el-col  :span="4" style="height: 100%;">
        <div class="left-l grid-content bg-purple" >课程描述</div>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <div class="right-r grid-content bg-purple" >班级A</div>
      </el-col>
    </el-row>

    <el-row class="totality" style="height: 160px">
      <el-col  :span="4" style="height: 100%;">
        <div class="left-l grid-content bg-purple" style="height: 100%;text-align: inherit; line-height: 100px;">教学进度介绍</div>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <div class="right-r grid-content bg-purple" style="height: 100%;">不同的数学家和哲学家对数学的确切范围和定义数学是人类对事物的抽象结构与模式进行严格描述的一种通用手段，可以应用于现实世界的任何问题，所有的数学对象本质上都是人为定义的。从这个意义上，数学属于形式科学，而不是自然科学。不同的数学家和哲学家对数学的确切范围和定义有一系列的看法。</div>
      </el-col>
    </el-row>

    <el-row style="height: 100%;border: 1px solid  #e1e8ef;">
      <el-col :span="4">
        <div class="left-l grid-content bg-purple" style="    height: 176px;     text-align: inherit; line-height: 100px;">教学进度附件</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple" style="border-bottom: 0px solid #e1e8ef;"><img style="width: 4%;" src="../../../../assets/img/course/pdf 3@2x.png"></div>
      </el-col>
    </el-row>


    <h3 v-if="this.$route.params.id === 'W' || this.$route.params.id === 'Y'">审批</h3>
    <el-row v-if="this.$route.params.id === 'W' || this.$route.params.id === 'Y'" class="totality">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple">审批人</div>
      </el-col>
      <el-col :span="8">
        <div class="right-r grid-content bg-purple">王珂</div>
      </el-col><el-col  :span="4">
      <div class="left-l grid-content bg-purple">审批时间</div>
    </el-col>
      <el-col :span="8">
        <div class="right-r grid-content bg-purple">2021-09-06 14:28</div>
      </el-col>
    </el-row>
    <el-row v-if="this.$route.params.id === 'W'" class="totality" style="height: 160px">
      <el-col  :span="4" style="height: 100%;">
        <div class="left-l grid-content bg-purple" style="height: 100%;">原因</div>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <div class="right-r grid-content bg-purple" style="height: 100%;">机构内容从法理基础来讲，教育培训机构享有的权利属于社会教育权，其存在具有一定的法理基础，教育培训机构在民法中是“特殊企业法人”，其公益属性是不同于一般企业法人最显著的特征；在行政法中是“行政相对人”，与政府构成行政法律关系。归属于社会教育权范畴的教育培训机构，相对于国家教育权而言，具有独特的法律属性。</div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="4">
        <el-button v-if="this.$route.params.id === 'D'"   type="primary" @click="open()">通过</el-button>
        <el-button v-if="this.$route.params.id === 'D'" @click="openText()">拒绝</el-button>
        <el-button v-if="this.$route.params.id !== 'D'" type="primary" @click="$router.push({ name: 'message', params: {id:'train'} })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>

    </el-row>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        type: 'D',
        txtVal: 0,
        // type: this.$route.params.type
      }
    },
    computed: {},
    created() {
      this.type = this.$route.params.id
      // console.log(type)
      console.log(this.$route.params.id)
    },
    methods: {
      open() {
        const imga = require("../../../../assets/img/审批完成2.png");
        this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false
        });
      },
      openText() {
        this.$alert('<textarea class="textarea_border" v-model="formData.field101" rows="15" cols="50" maxlength="500" @input="descInput" placeholder="请输入拒绝原因" ></textarea> <span class="numberV" style="position: absolute; right: 15px;bottom: 2px;">' + this.txtVal + '/500</span>', '原因', {
          dangerouslyUseHTMLString: true,
          cancelButtonClass: "el-confirm"
        });
      },
      descInput(){
        this.txtVal = this.formData.field101.length;
      },
    }
  }
</script>
<style>
  .right-r {
    padding: 13px 13px 13px 33px;
    border: 1px solid  #e1e8ef;
    border-left: 0px solid  #e1e8ef;
  }
  .left-l {
    padding: 13px 13px 13px 33px;
    background: #ecf4fb;
    border: 1px solid  #e1e8ef;

  }
</style>

